<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <script type="text/javascript" src="../js/initPage.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>随便打TCS系统</title>
    <!-- Bootstrap -->
    <link href="../vendors/bootstrap/dist/css/bootstrap.min.css"
          rel="stylesheet">
    <!-- Font Awesome -->
    <link
            href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
            rel="stylesheet">
    <!-- NProgress -->
    <link href="../vendors/nprogress/nprogress.css"
          rel="stylesheet">
    <!-- iCheck -->
    <link href="../vendors/iCheck/skins/flat/green.css"
          rel="stylesheet">
    <!-- bootstrap-progressbar -->
    <link
            href="../vendors/bootstrap-progressbar/css/bootstrap-progressbar-3.3.4.min.css"
            rel="stylesheet">
    <!-- JQVMap -->
    <link href="../vendors/jqvmap/dist/jqvmap.min.css"
          rel="stylesheet"/>
    <!-- bootstrap-daterangepicker -->
    <link
            href="../vendors/bootstrap-daterangepicker/daterangepicker.css"
            rel="stylesheet">
    <!-- Custom Theme Style -->
    <link href="../build/css/custom.min.css" rel="stylesheet"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.css" rel="stylesheet"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.css" rel="stylesheet"/>
    <link href="https://cdn.90so.net/layui/2.5.5/css/layui.css" rel="stylesheet"/>
    <style>
        .detailBox {
            background-color: #fff;
            border: 1px solid #eee;
            position: fixed;
            top: 50%;
            left: 50%;
            width: 50%;
            height: 50%;
            -webkit-transform: translateX(-50%) translateY(-50%);
            display: none;
        }

        .ShadowBox {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            background: rgba(0, 0, 0, 0.3);
            display: none;
        }

        .detailBox h4 {
            border-bottom: 1px solid #ccc;
            padding: 10px 20px;
        }

        .detailBox .tableBox {
            padding: 20px;
        }

        .detailBox .closeBox {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 20px;
        }
    </style>
</head>
<%@ include file="loginCheck.jsp" %>
<body class="nav-md">
<div class="container body">
    <div class="main_container">
        <div class="col-md-3 left_col">
            <div class="left_col scroll-view">
                <div class="clearfix"></div>
                <br/>
            </div>
        </div>
        <!-- page content -->
        <div class="right_col" role="main">
            <div class="">
                <div class="page-title">
                    <div class="title_left"></div>
                    <div class="x_content">
                        充值时间段： <input type="text" id="usetime1" value="${usetime1}" style="color:#333"/>
                        &nbsp;
                        商家店铺：<select id="shopSelect"></select>
                        <button type="submit" class="btn btn-default"
                                onclick="find()">搜索
                        </button>
                    </div>
                </div>
                <div class="x_panel">
                    <div class="x_content" id="lineChartParent" style="height:50%;width: 70%">
                        <!-- 插入图表 -->
                        <canvas id="myChart"></canvas>
                    </div>
                </div>
                <div class="clearfix"></div>
                <br/>
            </div>
            <div style="width: 100%; text-align: center;">
                <div id='page'></div>
            </div>
        </div>
    </div>
</div>
<!-- jQuery -->
<script src="../vendors/jquery/dist/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<script src="https://cdn.90so.net/layui/2.5.5/layui.all.js"></script>
<script src="https://cdn.90so.net/layui/2.5.5/layui.js"></script>
<script>
    $(function () {
        $.ajax({
            type: "GET",
            url: "getSelfShops",
            async: false,
            success: function (data) {
                var select = $('#shopSelect');
                console.log(select.val());
                if (select)
                    select.html("<option selected value=''>---------请选择----------</option>");
                for (var i = 0; i < data.total; i++) {
                    var id = data.data[i].id;
                    var name = data.data[i].shopname;
                    select.append("<option value='" + id + "'>" + name + "</option>");

                }
            }

        });
        layui.use('laydate', function () {
            var laydate = layui.laydate;
            //执行一个laydate实例
            laydate.render({
                elem: '#usetime1' //指定元素
                , range: true
            });
        });
        dataonload(null);
        $('#shopSelect').change(function () {     //下拉框改变时重新加载页面
            var options = $("#shopSelect option:selected");  //获取选中的项
            var shopId = options.val();
            var usetime = $('#usetime1').val();
            if (shopId != "") {
                dataonload(shopId, usetime);
            }

        });
    });

    function find() {
        var time = $('#usetime1').val();
        var shopid = $('#shopSelect').val();
        dataonload(shopid, time);
    }

    function dataonload(shopId, usetime) {
        $('#myChart').remove(); // this is my <canvas> element
        $('#lineChartParent').append('<canvas id="myChart"></canvas>');
        var ctx = document.getElementById('myChart');
        var dataArray = [];
        $.ajax({
            type: "GET",
            url: "countSelfShop",
            data: {
                selfShopId: shopId,
                usetime: usetime
            },
            success: function (data) {
                console.log(data);
                console.log(data.total=="0");
                if (data.total=="0"){
                    alert("查询为空！");
                }
                dataArray[0] = data.totalearn;
                dataArray[1] = data.derate;
                dataArray[2] = data.cash;
                dataArray[3] = data.zfbearn;
                dataArray[4] = data.wxearn;
                dataArray[5] = data.unknowearn;
                var myChart = new Chart(ctx, {
                    type: 'bar',
                    data: {
                        labels: ['总收入', '总话费或购物金抵扣金', '总支付现金', '支付宝支付总金额', '微信支付总金额', '未知支付总金额'],
                        datasets: [{
                            label: '#',
                            data: dataArray,
                            backgroundColor: [
                                'rgba(255, 99, 132, 0.2)',
                                'rgba(54, 162, 235, 0.2)',
                                'rgba(255, 206, 86, 0.2)',
                                'rgba(75, 192, 192, 0.2)',
                                'rgba(153, 102, 255, 0.2)',
                                'rgba(255, 159, 64, 0.2)'
                            ],
                            borderColor: [
                                'rgba(255, 99, 132, 1)',
                                'rgba(54, 162, 235, 1)',
                                'rgba(255, 206, 86, 1)',
                                'rgba(75, 192, 192, 1)',
                                'rgba(153, 102, 255, 1)',
                                'rgba(255, 159, 64, 1)'
                            ],
                            borderWidth: 1
                        }]
                    },
                    options: {
                        animation: {           // 这部分是数值显示的功能实现
                            onComplete: function () {
                                var chartInstance = this.chart,
                                    ctx = chartInstance.ctx;
                                // 以下属于canvas的属性（font、fillStyle、textAlign...）
                                ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
                                ctx.fillStyle = "black";
                                ctx.textAlign = 'center';
                                ctx.textBaseline = 'bottom';
                                this.data.datasets.forEach(function (dataset, i) {
                                    var meta = chartInstance.controller.getDatasetMeta(i);
                                    meta.data.forEach(function (bar, index) {
                                        var data = dataset.data[index];
                                        ctx.fillText(data, bar._model.x, bar._model.y - 5);
                                    });
                                });
                            }
                        },
                        scales: {
                            yAxes: [{
                                ticks: {
                                    beginAtZero: true
                                }
                            }]
                        }
                    }
                });
            }
        });
    }


</script>
<!-- Bootstrap -->
<script src="../vendors/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- FastClick -->
<script src="../vendors/fastclick/lib/fastclick.js"></script>
<!-- NProgress -->
<script src="../vendors/nprogress/nprogress.js"></script>
<!-- bootstrap-daterangepicker -->
<script src="../vendors/moment/min/moment.min.js"></script>
<script
        src="../vendors/bootstrap-daterangepicker/daterangepicker.js"></script>
<!-- Chart.js -->
<script src="../vendors/Chart.js/dist/Chart.min.js"></script>
<!-- Custom Theme Scripts -->
<script src="../build/js/custom.min.js"></script>
<!-- layui -->
<script src="../vendors/layui/layui.js"></script>


</body>
</html>